<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮组</title>
		<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>-->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

	</head>
	<body>
		<!--
        	作者：赵星宇
        	时间：2019-07-26
        	描述：学习使用按钮组
        -->
        <div class="container">
                                  <!--变为垂直-->
        	<div class="btn-group btn-group-vertical">
        		<button type="button" class="btn btn-default">左</button>
        		<button type="button" class="btn btn-default">中</button>
        		<button type="button" class="btn btn-default">右</button>
        	</div>
        </div>
        
        <!--btn工具栏-->
        <div class="container">
	        <div class="btn-toolbar">
	        	<div class="btn-group">
	        		<button type="button" class="btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
	        		<button type="button" class="btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
	        	</div>
	        	<div class="btn-group">
	        		<button type="button" class="btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
	        		<button type="button" class="btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
	        	</div>
	        	<div class="btn-group">
	        		<button type="button" class="btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
	        		<button type="button" class="btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
	        	</div>
	        </div>
        </div>
        
        <!--调节按钮大小-->
        <div class="container">
        	<div class="btn-group btn-group-lg">
        		<button type="button" class="btn btn-default">左</button>
        		<button type="button" class="btn btn-default">中</button>
        		<button type="button" class="btn btn-default">右</button>
        	</div>
        	<div class="btn-group">
        		<button type="button" class="btn btn-default">左</button>
        		<button type="button" class="btn btn-default">中</button>
        		<button type="button" class="btn btn-default">右</button>
        	</div>
        	<div class="btn-group btn-group-sm">
        		<button type="button" class="btn btn-default">左</button>
        		<button type="button" class="btn btn-default">中</button>
        		<button type="button" class="btn btn-default">右</button>
        	</div>
        	<div class="btn-group btn-group-xs">
        		<button type="button" class="btn btn-default">左</button>
        		<button type="button" class="btn btn-default">中</button>
        		<button type="button" class="btn btn-default">右</button>
        	</div>
        </div>
        
        <!--嵌套下拉菜单-->
        <div class="container">
        	<div class="btn-group">
        		<button type="button" class="btn btn-default">1</button>
        		<button type="button" class="btn btn-default">2</button>
        		<div class="btn-group">
        			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        				下拉菜单
        				<span class="caret"></span>
        			</button>
        			<ul class="dropdown-menu" role="menu">
        				<li ><a href="#">点我</a></li>
        				<li ><a href="#">点我</a></li>
        			</ul>
        		</div>
        	</div>
        </div>
        
        <!--创建充满屏幕的按钮-->
        <div class="container">
        	<div class="btn-group btn-group-justified">
        		<div class="btn-group">
        			<button type="button" class="btn btn-default">左</button>
        		</div>
        		<div class="btn-group">
        			<button type="button" class="btn btn-default">中</button>
        		</div>
        		<div class="btn-group">
        			<button type="button" class="btn btn-default">右</button>
        		</div>
        	</div>
        </div>
        
        <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
